<template>
  <div id="DataMerger">
    <div class="dataMergerUp">
      <div class="itemUp">
        <div class="item">
          <div class="title">归集数据总量</div>
          <div class="nub">1916</div>
        </div>
        <div class="item">
          <div class="title">数据种类</div>
          <div class="nub">1916</div>
        </div>
      </div>
      <div class="itemDown">
        <div class="item">
          <div class="title">部门数量</div>
          <div class="nub">1916</div>
        </div>
        <div class="item">
          <div class="title">字段数量</div>
          <div class="nub">1916</div>
        </div>
      </div>
    </div>
    <div
      class="dayaNumber"
      id="dayaNumber"
      style="width: 100%; height: 288.57px"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("dayaNumber"));
    var option;
    //绘制图标

    option = {
      title: {
        show: true,
        top:'3%',
        left:'4%',

            //主标题文本,'{a|}'表示使用rich中的b样式，我需要的样式是图片在前，文字在后
            //想要背景图在文字上的可以这么写：text: '{a|你的标题}'
            text: '{a|}'+' 数量',
            //主标题文字样式
            textStyle: {
                color: '#fff',
                fontSize: 14,
                //自定义样式
                rich: {
                    "a": {
                        backgroundColor: {
                        	//在这里填写背景图片路径
                            image: require('@/assets/icon.png')
                        },
                        //设置图片宽高
                        height:15,
                        width:24,
                    }
                  }
            },
      },
      legend: {
        data: ["事项数量", "情形数量","材料数量","材料数量"],

        itemHeight: 3,
        itemWidth: 16,
        top: 20,
        right: 20,
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        borderColor: "#67e7b7",
      },
      xAxis: 
        {
          type: "category",
          axisLabel: {
          interval: 0,
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          show: true,//是否显示轴线
          lineStyle: {
            color: '#1c2537',//刻度线的颜色
            width: 1
          }
        },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "八月",
            "九月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis:
      {
        type: "value",
        min: 0,
        max: 25,
        interval: 5,
        nameGap: 25,
        textStyle: {
          color: '#fff'
        },
        axisLabel: {

          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#1c2537'],

            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          show: true,//是否显示轴线
          lineStyle: {
            color: '#1c2537',//刻度线的颜色
            width: 1
          }
        },
      },
      series: [
        {
          name: "事项数量",
          type: "bar",
          data: [2.0, 4.9, 0, 0, 25.6, 5, 10, 15, 16, 20.0, 6.4, 3.3],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(54, 119, 254, 1) " },
              { offset: 1, color: "rgba(17, 21, 33,0)" },
              // { offset: 0.5, color: '#188df0' },
            ]),
          },
        },
        {
          name: "情形数量",
          type: "bar",
          data: [2.6, 5.9, 9.0, 0, 0, 0, 0, 0, 18.8, 6.0, 2.3],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(112, 255, 204, 1)" },
              { offset: 1, color: "rgba(17, 21, 33, 0) " },
            ]),
          },
        },
        {
          name: "材料数量",
          type: "bar",
          data: [2.0, 4.9, 0, 0, 25.6, 5, 10, 15, 16, 20.0, 6.4, 3.3],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(255, 148, 27, 1) " },
              { offset: 1, color: "rgba(17, 21, 33, 0)" },
              // { offset: 0.5, color: '#188df0' },
            ]),
          },
        },
        {
          name: "料材数量",
          type: "bar",
          data: [2.0, 4.9, 0, 0, 25.6, 5, 10, 15, 16, 20.0, 6.4, 3.3],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(115, 115, 252, 1) " },
              { offset: 1, color: "rgba(17, 21, 33,0)" },
              // { offset: 0.5, color: '#188df0' },
            ]),
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>
<style lang="less">
#DataMerger {
  // width: 585px;

  // height: 516px;
  opacity: 0.9;
}
.dayaNumber {
  //   left: 25px;
  //   top: 353px;
  margin-top: 20px;
  // width: 585px;
  // height: 288.57px;
  opacity: 1;
  background: url("../../../state/DataMerger/bj.png");
  background-size: 100% 100%;
}
.dataMergerUp {
  width: 100%;
  min-height: 100px;


  
  .itemUp,
  .itemDown {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item {
    height: 70px;
    margin-bottom: 16px;
    
    .nub {
   
      left: 341px;

      width: 269px;
      height: 40px;
      opacity: 1;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(120, 169, 255, 0.2) 51.39%,
        rgba(255, 255, 255, 0) 100%
      );
      font-size: 30px;
      line-height: 40px;
      text-align: center;
      vertical-align: top;
      // border-width: 0px 0px 0px 0px;
      // border-style: solid;
      // border-color: rgba(255, 255, 255, 1);
      // border-width: 1.4px 0px 1.4px 0px;
// border-style: solid;
         background-size: 100% 100%;

  
 
    }

    .title {
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
      margin: 16px 0;
    }

  }
}
.itemUp .nub {
  color: rgba(19, 182, 232, 1);
  font-weight: bold;
}
.itemDown .nub {

   color: rgba(105, 253, 195, 1);
  font-weight: bold;
}

</style>


  